import { cn } from "@/lib/utils";
import { ActiveTool, Editor, FILL_COLOR } from "../types";
import { ToolSidebarHeader } from "./tool-sidebar-header";
import { ToolSidebarClose } from "./tool-sidebar-clolse";
import { ScrollArea } from "@/components/ui/scroll-area";
import { ShapeTool } from "./shape-tool";
import { FaCircle, FaSquare, FaSquareFull } from "react-icons/fa";
import { IoTriangle } from "react-icons/io5";
import { FaDiamond } from "react-icons/fa6";
import { ColorPicker } from "./color-picker";

interface FillColorSidebarProps {
  editor: Editor | undefined; //todo
  activeTool: ActiveTool;
  onChangeActiveTool: (tool: ActiveTool) => void;
}

export const FillColorSidebar = ({
  editor,
  activeTool,
  onChangeActiveTool,
}: FillColorSidebarProps) => {

  const value = editor?.fillColor || FILL_COLOR

  const onClose = () => onChangeActiveTool("select")

  const onChange = (value: string) => {
    editor?.setFillColor(value)
  }

  return (
    <aside
      className={cn("bg-white relative w-[360px] h-full border-r z-[40px] flex flex-col",
        activeTool === "fill" ? "visible" : "hidden"
      )}
    >
      <ToolSidebarHeader
        title="Fill color"
        description="Add fill color to your element"
      />

      <ScrollArea>
        <div className="grid space-y-6 overflow-hidden">
          <ColorPicker
            value={value}
            onChange={onChange}
          />
        </div>
      </ScrollArea>

      <ToolSidebarClose
        onClick={onClose}
      />
    </aside>
  )
}